<template>
  <KFlex class="sys-footer">
    <KFlexItem v-for="menu in menus" :key="`menu_${menu.id}`">
      <KView class="sys-footer-item" @click="itemClick(menu)">
        <KView class="sys-footer-image-div">
          <img v-if="menu.checkPath.indexOf(currentPath)===-1" class="sys-img sys-footer-image" :src="menu.icon[0]" mode="aspectFit">
          <img v-else class="sys-img sys-footer-image" :src="menu.icon[1]" mode="aspectFit">
        </KView>
        <KView class="sys-footer-text" :class="{'select':menu.checkPath.indexOf(currentPath)!==-1}">
          <span>{{menu.label}}</span>
        </KView>
      </KView>
    </KFlexItem>
  </KFlex>
</template>

<script>
  import GlobalData from 'utils/globalData';

  export default {
    watch: {
      '$route'() {
        this.resetPath();
      }
    },

    data() {
      let images = GlobalData.images;
      return {
        currentPath: '',
        menus: [{
          id: 1,
          path: '/home',
          checkPath: ['/', '/home'],
          label: "主页",
          icon: images.homeIndex
        }, {
          id: 2,
          path: '/classify',
          checkPath: ['/classify'],
          label: "分类",
          icon: images.classification
        }, {
          id: 3,
          path: '/shoppingCart',
          checkPath: ['/shoppingCart'],
          label: "购物车",
          icon: images.shoppingCart
        }, {
          id: 4,
          path: '/personalCenter',
          checkPath: ['/personalCenter'],
          label: "我的",
          icon: images.personal
        }]
      };
    },

    created() {
      this.resetPath();
    },

    methods: {
      resetPath() {
        this.currentPath = this.$route.path;
      },

      itemClick(menu) {
        let path = this.$route.path;
        if (menu.checkPath.indexOf(path) !== -1) {
          return;
        }

        this.$emit('item-click', menu);
      }
    }
  };

</script>

<style lang="scss">
  .sys-footer {
    padding-top: formatPx(20);
    height: formatPx(90);
    box-shadow: 0 formatPx(2) formatPx(10) formatPx(5) rgba(0, 0, 0, .14);

    .sys-footer-item {
      width: formatPx(80);
      margin: auto;
    }

    .sys-footer-image-div {
      img {
        height: formatPx(31);
        width: formatPx(35);
        margin: auto;
      }
    }

    .sys-footer-text {
      margin-top: formatPx(6);
      text-align: center;
      font-size: formatPx(24);
      color: #81848a;

      &.select {
        color: #59c264;
      }
    }
  }

</style>
